<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors: xlm
 * @LastEditTime: 2021-07-01 14:32:55
 * @description: 商品导航栏
 -->
<template>
  <!-- 底部导航栏 -->
  <view class="controlBox">
    <view v-if="hideMenu" class="controlContainer">
      <view class="rControl">
        <view class="btn bl un">
          <view>{{ '仅供展示, 请返回上一级购买' }}</view>
        </view>
      </view>
    </view>
    <view v-else class="controlContainer">
      <view class="lControl">
        <view class="imagesBox relative-container" @click="goLogin">
          <b-image width="36" height="40" mode="aspectFit" src="/static/images/commodity/btn_service.png" />
          <view class="span">客服</view>
          <b-open-type v-if="userToken" open-type="contact" :goods="goods" />
        </view>
        <view v-if="showCartButton" class="imagesBox cart-box" @click="$navigateTo('/pages/cart/index')">
          <url-image width="50" height="40" mode="aspectFit" src="/static/images/member/detail/shop-cart.png" />
          <view class="span">购物车</view>
          <text class="num" v-if="cartNums">{{cartNums > 99 ? '99+' : cartNums}}</text>
        </view>
      </view>
      <view v-if="buyEnable && allData.series_type === 3" class="rControl">
        <view class="btn wn" :class="{'un': !goods.stock_number}" @click="navButtonHandle('boxTake')">
          <view>提货({{ goods.stock_number || 0 }}箱)</view>
        </view>
        <view class="btn bl" @click="navButtonHandle('boxApply')">
          <view>{{ '立即申购' }}</view>
        </view>
      </view>
      <view v-else-if="buyEnable && !availableGroupBuy" class="rControl">
        <!-- <view v-if="showShareButton && !promote" class="btn bl" @click="navButtonHandle('shareDialog')">
          <view>{{ shareText.text }}</view>
          <view v-if="shareText.money > 0" class="small">￥{{ shareText.money | formatMoney }}</view>
        </view> -->
        <view v-if="showCartButton" class="btn white" @click="navButtonHandle('cartBtn')">
          <view>加入购物车</view>
        </view>
        <view v-if="(goods.from_type == 9)" class="btn bl" @click="navButtonHandle('toPartnerAddress')">
          {{ '赠品地址' }}
        </view>
        <view class="btn bl" @click="navButtonHandle('buyBtn')">
          <view>{{ buyText.text }}</view>
          <view v-if="buyText.money > 0 && userInfo.current_member_card_type!==3" class="small">省￥{{ buyText.money | formatMoney }}</view>
          <view v-if="buyText.money > 0 && userInfo.current_member_card_type===3 && !isHiddenChairmanPrice" class="small">省￥{{ buyText.money | formatMoney }}</view>
        </view>
      </view>
      <view v-else-if="availableGroupBuy && buyEnable" class="rControl">
        <view class="btn lpn" :class="{'un': !buyEnable}" @click="navButtonHandle('groupSingleBuy')">
          <view class="span">¥{{ topShowPrice }}</view>
          单独购买
        </view>
        <view class="btn pn" :class="{'un': !buyEnable}" @click="navButtonHandle('openGroup')">
          <view v-if="groupInfo.groupPrice" class="span">¥{{ groupInfo.groupPrice | formatMoney }}</view>
          发起拼单
        </view>
      </view>
      <view v-else class="rControl">
        <!-- <view v-if="showShareButton && !promote" class="btn bl" @click="navButtonHandle('shareDialog')">
          <view>{{ shareText.text }}</view>
          <view v-if="shareText.money > 0" class="small">￥{{ shareText.money | formatMoney }}</view>
        </view> -->
        <view v-if="showCartButton" class="btn white" @click="navButtonHandle('cartBtn')">
          <view>加入购物车</view>
        </view>
        <view class="btn bl" :class="{'un': unabText !== '加入购物车', 'waitSale': waitSale || unabText == '该商品还未开售'}" @click="mention">
          <block v-if="unabText === '不支持配送'">
            <view>{{ buyText.text }}</view>
            <view v-if="buyText.money > 0 && userInfo.current_member_card_type!==3" class="small">省￥{{ buyText.money | formatMoney }}</view>
            <view v-if="buyText.money > 0 && userInfo.current_member_card_type===3 && !isHiddenChairmanPrice" class="small">省￥{{ buyText.money | formatMoney }}</view>
          </block>
          <block v-else>
            {{ !waitSale ? unabText : waitSale }}
          </block>
        </view>
      </view>
      <guide v-if="buyEnable && allData.series_type === 3" position="position: absolute; left:25rpx; bottom: 100rpx; width:700rpx" :guide-pic="`/static/images/box/box_guide_button.png`"></guide>

    </view>
  </view>
</template>
<script>
import {mapState, mapGetters } from 'vuex'
import { getUserLevel } from '@/utils/common'
import Guide from '@/components/guide/index'
export default {
  name: 'CommodityNav',
  components: {
    Guide
  },
  props: {
    allData: {
      type: Object,
      required: true,
      default: () => { return {} }
    },
    goods: {
      type: Object,
      required: true,
      default: null // 商品item
    },
    hideMenu: {
      type: Boolean,
      default: false
    },
    groupBuy: {
      type: Object,
      required: false,
      default: () => { return {} } // 拼团信息
    },
    commodityType: {
      type: String,
      default: 'single'
    },
    buyEnable: {
      type: Boolean,
      default: false // 是否可以购买
    },
    isSend: {
      type: Boolean,
      default: false // 是否配送
    },
    showCartButton: {
      type: Boolean,
      default: false // 是否显示购物车
    },
    waitSale: {
      type: String,
      default: '' // 是否未开售
    },
    unabText: {
      type: String,
      default: '' // 不可购买按钮文字
    },
    showShareButton: {
      type: Boolean,
      default: false
    },
    //购物车数量
    cartNums:{
      type:[String,Number]
    }
  },
  data() {
    return {
      partnerPresentList: [[]],
      groupInfo: {},
      availableGroupBuy: false,
      promote: false,
      // 设置是否显示董事价
      isHiddenChairmanPrice: uni.getStorageSync('isHiddenChairmanPrice')||false,
    }
  },
  computed: {
    ...mapGetters(['userToken', 'user', '']),
    ...mapState([
      'userInfo'
    ]),
    showCanBuy() {
      const canBuy = [0, 1, 2]
      if (canBuy.includes(this.goods.status)) {
        return true
      }
      if (this.goods.status === 3 && this.buyEnable) {
        return true
      }
      return false
    },
    topShowPrice() {
      if (!this.user) {
        return this.goods.price
      }
      if (this.goods.from_type === 9) {
        return this.goods[getUserLevel()]
      } else {
        return this.goods.vip_price
      }
    },
    buyText() { // 购买按钮文字
      let buyText = {
        text: '立即购买',
        money: 0
      }
      const fromtype = this.goods.from_type * 1
      if (!this.user || fromtype === 9) {
        return buyText
      }
      switch (this.user.current_member_card_type) {
        case 0:
          break
        case 1:
          buyText = {
            text: '立即购买',
            money: this.$utils.math.cut(this.goods.vip_price,this.goods.region_price),//VIP购买省=销售价(现在是vip_price)-VIP价(现在是region_price)
          }
          break
        case 2:
          buyText = {
            text: '立即购买',
            money: this.$utils.math.cut(this.goods.vip_price,this.goods.diamond_price),//钻石购买省=销售价-钻石价
          }
          break
        case 3:
          buyText = {
            text: '立即购买',
            money: this.$utils.math.cut(this.goods.vip_price,this.goods.director_price),//董事购买省=销售价-董事价
          }
          break
        default:
          break
      }
      // if (fromtype === 25) {
      //   buyText = {
      //     text: '发起拼单',
      //     money: this.groupBuy.groupInfo.groupPrice
      //   }
      // }
      return buyText
    },
    shareText() { // 分享按钮文字
      let shareText = {
        text: '分享赚钱',
        money: 0
      }

      if (!this.user) {
        return shareText
      }
      switch (this.user.current_member_card_type) {
        case 0:
        case 1:
          break
        case 2:
          if (this.goods.region_share_commission) {
            shareText = {
              text: '分享赚',
              money: this.goods.region_share_commission
            }
          } else {
            if (this.goods.from_type * 1 !== 22) {
              shareText = {
                text: '分享好友',
                money: 0
              }
            }
          }
          break
        case 3:
          if (this.goods.director_share_commission) {
            shareText = {
              text: '分享赚',
              money: this.goods.director_share_commission
            }
          } else {
            if (this.goods.from_type * 1 !== 22) {
              shareText = {
                text: '分享好友',
                money: 0
              }
            }
          }
          break
        default:
          break
      }
      return shareText
    }
  },
  created() {
  },
  methods: {
    // 设置拼团逻辑和UI
    setGroup(val) {
      this.availableGroupBuy = val.availableGroupBuy
      this.groupInfo = val.groupInfo
    },
    navButtonHandle(type) {
      this.$emit('navButtonHandle', type)
    },
    goLogin() {
      if (this.userToken) return
      this.$navigateTo('/pages/login/index')
    },
    mention() {
      if (!this.isSend) {
        uni.showToast({
          title: '您当前地址不在配送范围哦，修改后再购买吧~',
          icon: 'none',
          duration: 2 * 1000
        })
      }
    }
  }
}
</script>
<style lang="scss">
.controlBox {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 2;
  left: 0;
  background-color: #fff;
  box-shadow: 1px -7px 18px 0px rgba(185, 185, 200, 0.4);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .controlContainer {
    display: flex;
    margin: 0 10rpx;
    height: 120rpx;
    .lControl {
      display: flex;
      align-items: center;
      .imagesBox {
        display: flex;
        flex: 0 0 100rpx;
        width: 100rpx;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        image {width: 40rpx; padding-bottom: 4rpx; margin-bottom: 10rpx;}
        .span{font-size: 24rpx; line-height: 24rpx; border: none;}
      }
      .cart-box{
        position: relative;
        .num{
          position: absolute;
          right: 10rpx;
          top: -10rpx;
          background-color: #E21536;
          color: white;
          border-radius: 1000rpx;
          padding: 0rpx 8rpx;
          font-size: 20rpx;
        }
      }
    }
    .rControl {
      display: flex;
      flex: 1;
      align-items: center;
      margin: 0 20rpx;
      .btn {
        margin: 20rpx 0;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        line-height: 32rpx;
        color: #FEFDFD;
        height: 80rpx;
        text-align: center;
        position: relative;
        .small{
          display: inline-block;
          font-size: 24rpx;
          background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/detail/tip.png') no-repeat;
          background-size: 100% 100%;
          top:-25rpx;
          left: 50%;
          position: absolute;
          padding: 2rpx 10rpx 12rpx;
          // height: 40rpx;
          font-size: 18rpx;
          font-family: PingFang SC;
          color: #FFFFFF;
          white-space: nowrap;
        }
        &:nth-last-child(2) {
          margin-right: 0;
        }
        &.white{
          color: #333333;
          border: 2rpx solid #000000;
          box-sizing: border-box;
        }
      }
      .bl {background-color: #000; /* padding-top: 6rpx */}
      .flexLess{
        flex: 0.75
      }
      .lpn {
        background-color: #FFEAF0!important; /* padding-top: 6rpx; */ color: $color-theme;
        &.un{background-color: #DBD9DD!important; color: #fff}
        &.unDelivery { background-color: #DDD!important; color: #fff}
      }
      .pn {background-color: $color-price; /* padding-top: 6rpx; */
        &.unDelivery { background-color: #DDD}
      }
      .wn {
        color: #000;
        background-color: white; /* padding-top: 6rpx; */
        border: 2rpx solid #000;
        box-sizing: border-box;
      }
      .un{background-color: #ccc; border: none; color: white;}
      .waitSale{background-color:#30C885; flex: 1.5;}
    }
  }
}
</style>
